// pages/goods_detail/index.js
//1.发送请求获取商品数据
//2.点击轮播图 预览大图
//   1.给轮播图绑定点击事件
//   2.预览图片 调用小程序api previewImage
//3.点击加入购物车
//   1.先绑定点击事件
//   2.获取缓存中的购物车数据 数组格式
//   3.先判断当前的商品是否已经存在于购物车
//   4.已经存在 修改商品数据 执行购物车数量++ 填充回缓存中
//   5.不存在  添加商品数据 到购物车数组 新=元素 带上数量属性 填充回缓存
//   6.弹出用户提示
//4.商品收藏功能
//   1.页面onshow的时候 加载缓存中的商品收藏数据
//   2.判断当前商品是否是被收藏
//      1 是 改变页面的收藏图标
//      2 不是
//   3.点击商品收藏按钮 
//      1.判断该商品是否存在于缓存数组中
//         1.是 改变页面的收藏图标 将该商品删除
//         2.不是 将商品添加到缓存列表     
//引入 发送网络请求的方法
const http = require('../../utils/http.js');
import regeneratorRuntime from '../../lib/runtime/runtime'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iscollect:false,//是否收藏
    goods_id:null,
    goodsObj:{} //商品详情空对象
  },
  handelCollect(){//点击商品收藏按钮
     let {iscollect}=this.data
     iscollect=!iscollect //      1 是 改变页面的收藏图标和状态
     this.setData({
       iscollect
     })
     //   2.获取缓存中的收藏数据 数组格式
     let collect=wx.getStorageSync("collect")||[]
     //   3.先判断当前的商品是否已经存在于收藏数据
     let index =collect.findIndex(v=>v.goods_id===this.data.goodsObj.goods_id)
     console.log('collect index',index)
     if (index===-1){
      //   5.不存在  将商品添加到缓存列表
      collect.push(this.data.goodsObj)
      wx.showToast({
        title: '添加收藏成功！',
        icon: 'success',        
        duration: 1500,
        mask: true        
      });
     
     }else{ //1.存在  将该商品删除
       collect.splice(index,1)
       wx.showToast({
        title: '取消收藏成功！',
        icon: 'success',        
        duration: 1500,
        mask: true        
      });
      
     }
     wx.setStorageSync("collect",collect)
  },
 
   // 获取商品详情数据
   async getGoodsdetail(){
    let url = '/goods/detail'
    console.log(this.data.goods_id)    
    let { message: res } = await http.get(url,{goods_id:this.data.goods_id})
    
    
    console.log(res)
    this.setData({//  利用解构 .将返回的新数据和goodslist数组中的数据进行拼接
      goodsObj:{
        goods_id:this.data.goods_id,
        pics:res.pics,
        goods_name:res.goods_name,
        goods_price:res.goods_price,
        goods_introduce:res.goods_introduce.replace(/\.webp/g,'.jpg') //将内容里面的.webp替换为.jpg

      }       
    })
    //   2.获取缓存中的收藏数据 数组格式
    let collect=wx.getStorageSync("collect")||[]
    console.log(collect)
    //   3.先判断当前的商品是否已经存在于收藏数据
    let index =collect.findIndex(v=>v.goods_id===this.data.goodsObj.goods_id)
    console.log('init collect index',index)
    if (index===-1){
     //   5.不存在  
    
    }else{ //1.存在  改变页面的收藏图标
      const iscollect=true
      this.setData({
        iscollect
      })
    }
    
  },
  handlePreviewImage(e){//点击轮播图预览
    //1.构造要预览的图片数组
    console.log(e)
    const urls=this.data.goodsObj.pics.map(v=>v.pics_mid) //利用mpa寒暑解构数组
        
    //2.接收自定义属性data-url 传递过来的 url

    const current=e.currentTarget.dataset.url;
    console.log(current)
   
		wx.previewImage({
		  	current: current, // 当前显示图片的http链接
		  	urls: urls // 需要预览的图片http链接列表
		})


  },
  handleCartAdd(e){//点击加入购物车
    
    console.log('cartadd')

    //   2.获取缓存中的购物车数据 数组格式
    let cart=wx.getStorageSync("cart")||[]; //第一次是空则赋值为空数组
    console.log('-第一次cart--')
    console.log(cart)
   
    //   3.先判断当前的商品是否已经存在于购物车
    let index =cart.findIndex(v=>v.goods_id===this.data.goodsObj.goods_id)
    console.log(index)
    if (index===-1){
      //   5.不存在  添加商品数据 到购物车数组 新=元素 带上数量属性 填充回缓存
      //let goodsObj=this.data.goodsObj
      this.data.goodsObj.num=1
      this.data.goodsObj.checked=true //商品选中状态 默认选中
      cart.push(this.data.goodsObj)
     
    }else{
 //   4.已经存在 修改商品数据 执行购物车数量++ 填充回缓存中
     cart[index].num++
    }
    //保存到缓存
    wx.setStorageSync('cart', cart)
    console.log('-结束时的cart--')
    console.log(cart) 
    
    //   6.弹出用户提示
    wx.showToast({
      title: '加入成功！',
      icon: 'success',     
      mask: true, //防止用户手抖，疯狂点击
      success: (result)=>{
        
      },
      fail: ()=>{},
      complete: ()=>{}
    });

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     //options形参包含传递的参数
     
  },

  

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      //1.获取当前的小程序的页面栈-数组 长度最大是10个页面
      //2.数组中 索引最大的页面就是当前页面
      let pages= getCurrentPages()
      let currentPage=pages[pages.length-1]    
    
      //3.获取url上的type参数
      const {goods_id}=currentPage.options//解构goods_id     
      console.log(goods_id)
      this.setData({
        goods_id
      })
      this.getGoodsdetail()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})